<!DOCTYPE html>
<!-- saved from url=(0054)https://www.jq22.com/demo/jQueryMagnifier201702271056/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<link rel="stylesheet" type="text/css" href="./放大镜效果_files/magnifier.css">
	<title>放大镜效果</title>
</head>
<body style="">
	
	<div class="magnifier" id="magnifier1" style="width: 500px;">
		<div class="magnifier-container" style="width: 500px; height: 500px;">
			<div class="images-cover"><img src="./放大镜效果_files/1.png" width="500" height="375" style="top:50%;margin-top:-187.5px"></div>
			<!--当前图片显示容器-->
			<div class="move-view" style="width: 100px; height: 100px;"></div>
			<!--跟随鼠标移动的盒子-->
		</div>
		<div class="magnifier-assembly">
			<div class="magnifier-btn">
				<span class="magnifier-btn-left">&lt;</span>
				<span class="magnifier-btn-right">&gt;</span>
			</div>
			<!--按钮组-->
			<div class="magnifier-line">
				<ul class="clearfix animation03">
					<li class="active">
						<div class="small-img">
							<img src="./放大镜效果_files/1.png">
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="./放大镜效果_files/2.png">
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="./放大镜效果_files/3.png">
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="./放大镜效果_files/4.png">
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="./放大镜效果_files/1.png">
						</div>
					</li>
				</ul>
			</div>
			<!--缩略图-->
		</div>
		<div class="magnifier-view" style="width: 500px; height: 500px;"><img src="./放大镜效果_files/1.png" width="2500" height="1875"></div>
		<!--经过放大的图片显示容器-->
	</div>

<script src="./放大镜效果_files/jquery-1.10.2.js.下载"></script><script src="./放大镜效果_files/jquery.min.js.下载"></script>
<script type="text/javascript" src="./放大镜效果_files/magnifier.js.下载"></script>
<script type="text/javascript">
$(function() {
	
	var magnifierConfig = {
		magnifier : "#magnifier1",//最外层的大容器
		width : 500,//承载容器宽
		height : 500,//承载容器高
		moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
		zoom : 5//缩放比例
	};

	var _magnifier = magnifier(magnifierConfig);

	/*magnifier的内置函数调用*/
	/*
		//设置magnifier函数的index属性
		_magnifier.setIndex(1);

		//重新载入主图,根据magnifier函数的index属性
		_magnifier.eqImg();
	*/
});
</script>
</body></html>